<template>
  <div>
    <el-descriptions :column="1" border size="mini">
      <el-descriptions-item label="大用户名称" :labelStyle="customLabelStyle">
        {{ editingZoneObj ? editingZoneObj.name : '' }}
      </el-descriptions-item>

      <el-descriptions-item label="客户地址" :labelStyle="customLabelStyle">
        {{ getBasicDyhValue('userAddress') }}
      </el-descriptions-item>

      <el-descriptions-item label="所属行业" :labelStyle="customLabelStyle">
        {{ getBasicDyhValue('userTrade') }}
      </el-descriptions-item>

      <el-descriptions-item label="口径" :labelStyle="customLabelStyle">
        {{ getBasicDyhValue('caliber') }}
      </el-descriptions-item>

      <el-descriptions-item label="负责人" :labelStyle="customLabelStyle">
        {{ getBasicDyhValue('director') }}
      </el-descriptions-item>

      <template slot="extra">
        <el-button type="primary" size="mini" @click="handleBasicDyhEdit">编辑</el-button>
      </template>
    </el-descriptions>

    <!-- 添加或修改大用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false"
               append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="top">
        <el-row :gutter="10">
          <el-col :span="24" v-if="editingZoneObj">
            <el-form-item label="大用户名称">
              <el-input v-model="editingZoneObj.name" readonly style="width: 100%;"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="客户地址" prop="userAddress">
              <el-input v-model="form.userAddress" placeholder="请输入客户地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属行业" prop="userTrade">
              <el-input v-model="form.userTrade" placeholder="请输入所属行业"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="口径" prop="caliber">
              <el-input v-model="form.caliber" placeholder="请输入口径"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="负责人" prop="director">
              <el-input v-model="form.director" placeholder="请输入负责人"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {updateBasicDyh, getBasicDyhByAreaId} from "@/api/leakage/basicDyh";

export default {
  name: "BasicDyhInfo",
  data() {
    return {
      editingZoneObj: undefined,
      editingBasicDyhObj: undefined,
      // 是否显示弹出层
      open: false,
      title: '',
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      customLabelStyle: {width: '17%', textAlign: 'right'},
    }
  },
  methods: {
    updateEditingZone(zone) {
      this.editingZoneObj = zone
      this.loadBasicDyhData()
    },
    loadBasicDyhData() {
      getBasicDyhByAreaId({'areaId': this.editingZoneObj.areaId}).then(res => {
        this.editingBasicDyhObj = res.data
        this.form = Object.assign({}, res.data)
        this.$forceUpdate()
      })
    },
    handleBasicDyhEdit() {
      if (this.editingZoneObj === undefined) {
        this.$message.error('请先在左侧区域树选择大用户')
      } else {
        this.title = `编辑【${this.editingZoneObj.areaName}】基础信息`
        this.open = true
      }
    },
    getBasicDyhValue(key) {
      return this.editingBasicDyhObj !== undefined ? this.editingBasicDyhObj[key] : ''
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ID: null,
        tenantId: null,
        ChangeTime: null,
        AreaID: null,
        rskAmount: null,
        rskMaking: null,
        rskSize: null,
        homeuserAreaamount: null,
        homeuserAmount: null,
        homeuserXbAmount: null,
        publicAmount: null,
        publicXbAmount: null,
        businessAmount: null,
        businessXbAmount: null,
        firewaterAmount: null,
        firewaterXbAmount: null,
        poolAmount: null,
        poolCapacity: null,
        freeUser: null,
        freeUserElse: null,
        pipeLength: null,
        pipeMaking: null,
        pipeLife: null,
        midPipeLength: null,
        midPipeMaking: null,
        midPipeLife: null,
        firePipeLength: null,
        firePipeMaking: null,
        firePipeLife: null,
        firePipeAmount: null,
        firePipeValvestate: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateBasicDyh(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.loadBasicDyhData();
            });
          }
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 10px;
}

::v-deep .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-form--label-top .el-form-item__label {
  float: none;
  display: inline-block;
  text-align: left;
  padding: 0 !important;
}
</style>
